import React, { useState } from 'react';
import { Form, Select, Button, message } from 'antd';
import axios from 'axios';

const { Option } = Select;

const RiskPreferenceForm = ({ onSubmitSuccess }) => {
    const [loading, setLoading] = useState(false);

    const onFinish = async (values) => {
        setLoading(true);
        try {
            // 检测是否已有风险偏好数据
            const storedPreferences = localStorage.getItem('investment_preferences');
            if (storedPreferences) {
                // 清除旧数据
                localStorage.removeItem('investment_preferences');
                message.info('已清除旧的风险偏好数据');
            }

            // 提交问卷数据
            const res = await axios.post('/api/user/preferences', values, {
                headers: {
                    'Authorization': `Bearer ${localStorage.getItem('jwt_token')}` // 使用正确的 JWT Token
                }
            });

            // 存入新数据
            localStorage.setItem('investment_preferences', JSON.stringify(res.data.data));

            message.success(`风险偏好计算成功：${res.data.data.riskpreference}`);

            // 通知父组件问卷提交成功
            onSubmitSuccess();
        } catch (error) {
            message.error(`提交问卷失败：${error.response?.data.message || '服务器错误'}`);
        } finally {
            setLoading(false);
        }
    };

    return (
        <Form
            layout="vertical"
            onFinish={onFinish}
            style={{ maxWidth: 600, margin: '0 auto' }}
        >
            <Form.Item
                label="投资经验"
                name="exp"
                rules={[{ required: true, message: '请选择您的投资经验' }]}
            >
                <Select placeholder="请选择您的投资经验">
                    <Option value={1}>从未投资过</Option>
                    <Option value={2}>有过银行理财或基金经验</Option>
                    <Option value={3}>有过股票投资经验</Option>
                    <Option value={4}>长期活跃于股市或衍生品市场</Option>
                </Select>
            </Form.Item>
            <Form.Item
                label="可接受的最大单次损失"
                name="maxloss"
                rules={[{ required: true, message: '请选择您可接受的最大单次损失' }]}
            >
                <Select placeholder="请选择您可接受的最大单次损失">
                    <Option value={1}>不能接受任何本金损失</Option>
                    <Option value={2}>接受 5% 以内的亏损</Option>
                    <Option value={3}>接受 10% 左右的亏损</Option>
                    <Option value={4}>接受超过 20% 的高波动风险</Option>
                </Select>
            </Form.Item>
            <Form.Item
                label="年收入水平"
                name="revenue"
                rules={[{ required: true, message: '请选择您的年收入水平' }]}
            >
                <Select placeholder="请选择您的年收入水平">
                    <Option value={1}>少于 10 万</Option>
                    <Option value={2}>10 万 - 30 万</Option>
                    <Option value={3}>30 万 - 100 万</Option>
                    <Option value={4}>超过 100 万</Option>
                </Select>
            </Form.Item>
            <Form.Item
                label="投资目标"
                name="goal"
                rules={[{ required: true, message: '请选择您的投资目标' }]}
            >
                <Select placeholder="请选择您的投资目标">
                    <Option value={1}>保本为主</Option>
                    <Option value={2}>稳健增值</Option>
                    <Option value={3}>平衡收益与风险</Option>
                    <Option value={4}>高收益，愿意承担风险</Option>
                </Select>
            </Form.Item>
            <Form.Item>
                <Button type="primary" htmlType="submit" loading={loading}>
                    提交问卷
                </Button>
            </Form.Item>
        </Form>
    );
};

export default RiskPreferenceForm;